<template>
  <div>
    <h1>reactive的使用</h1>
    <h1 v-text="user.a"></h1>
    <button @click="add">+1</button>
    <h1 v-text="user.b"></h1>
    <hr />
    <h1 v-text="num"></h1>
    <!-- 响应式：数据变了，模板更新了 -->
    <!-- num++数据变了，但是模板没有更新，num不是响应式 -->
    <button @click="num++">+1</button>
  </div>
</template>

<script setup>
// reactive 和 ref如何选择？
//    reactive 可以转换对象成为响应式数据对象，但是不支持简单数据类型
//    ref 可以转换简单数据类型为响应式数据对象，也支持复杂数据类型，但是操作的时候需要 .value 。
//    可以清一色使用ref。推荐做法：
//       如果能确定数据是对象且字段名称也确定，可使用 reactive 转成响应式数据，其他一概使用 ref 。这样就没有 心智负担 。
//       在定义响应式数据的函数选择上，遵循：尽量使用 ref 函数支持所有场景，确定字段的对象使用 reactive 可以省去.value。
import { reactive } from "vue";

let obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
};
// reactive只能定义引用类型的响应式数据
// reactive 函数通常定义：复杂类型的响应式数据
let user = reactive(obj);

// 利用reactive定义基本类型的数据并不是响应式的
let num = reactive(1);

const form = reactive({
  username: "",
  password: "",
});

let add = () => {
  user.a++;
};
</script>

<style lang="scss" scoped>
</style>